@()(implicit flash: Flash)
@admin.main("change password") {
	<style>
			.icon2x {
				width: 28px;
				font-size: 24px;
				min-width: 28px;
				display: inline-block;
			}
	</style>

	<div class="col-sm-12">
		<section class="main-col" style="margin: 0 auto;">
			<div class="register">
				<h2 class="page-heading" style="font-size: 25px;">Change password</h2>
				<form id="form" class="registration-form form-horizontal" accept-charset="UTF-8"
				action="@routes.AdminController.changePassword()" autocomplete="off" method="post">

					<div class="col-sm-offset-4">
						<span class="error" style="line-height: 35px;">@flash.get("info")</span>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">Account:</label>
						<div class="col-sm-4">
							<div class="input-group">
								<span class="input-group-addon"><em
								class="fa fa-user icon2x"></em></span>
								<input id="loginEmail" name="account" placeholder="Account" autofocus="autofocus" type="text" class="form-control" required value=""/>
							</div>
						</div>

					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">Password:</label>
						<div class="col-sm-4">
							<div class="input-group">
								<span class="input-group-addon"><em
								class="fa fa-key icon2x"></em></span>
								<input id="loginPassword" name="password" placeholder="Password" type="password" autofocus="autofocus" class="form-control" required value="" maxlength="30"/>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">New password:</label>
						<div class="col-sm-4">
							<div class="input-group">
								<span class="input-group-addon"><em
								class="fa fa-key icon2x"></em></span>
								<input id="loginPassword" name="newPassword" placeholder="New password" type="password" class="form-control" maxlength="30"/>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">New password again:</label>
						<div class="col-sm-4">
							<div class="input-group">
								<span class="input-group-addon"><em
								class="fa fa-key icon2x"></em></span>
								<input id="loginPassword" name="newPasswordAgain" placeholder="New password again" type="password" class="form-control" maxlength="30"/>
							</div>
						</div>
					</div>

					<div class="actions col-sm-offset-4 col-sm-4">
						<input type="submit" id="loginSubmit" value="Change password"
						class="btn btn-primary btn-lg">
					</div>
				</form>

			</div>
		</section>
	</div>
	<script>
			$(function () {
				$('#form').bootstrapValidator({
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						newPassword: {
							validators: {
								notEmpty: {
									message: "The new password is required！"
								}
							}
						},
						newPasswordAgain: {
							validators: {
								notEmpty: {
									message: "The new password again is required！"
								},
								identical: {
									field: 'newPassword',
									message: 'The new password and the new password again are not the same!'
								}
							}
						},
					}
				});
			})




	</script>

}